<template>
	<static-forms ref="formRef" @watchCallBack="watchCallBack" :beforeHandler="beforeHandler">
		<template #tint1="scope">
			<el-Divider content-position="left" style="margin: 5px 0px"
				><span style="color: #1a63db; font-weight: bold">{{ scope.data.item.label }}</span></el-Divider
			>
		</template>
		<template #proProcess="scope">
			<!-- <div style="display: flex"><span style="width: 130px; font-size: 12px">项目进度百分比</span><el-slider v-model="scope.data.formData[scope.data.item.key]" show-input size="small" /></div> -->
			<!-- :model-value="test(scope.data.formData[scope.data.item.key])"
				   v-model="scope.data.formData[scope.data.item.key]"
				   v-model="scope.data.formData[scope.data.item.key]"
				-->
			<div style="display: flex">
				<span style="width: 130px; font-size: 12px">项目进度百分比</span>

				<el-slider :min="0" :max="100" v-model="progressValue" @change="changeAction" show-input size="small" />
			</div>
		</template>
		<template #workHours="scope">
			<staff-action :scope="scope"></staff-action>
		</template>
		<template #theset_QU="scope">
			<el-checkbox v-model="scope.data.formData[scope.data.item.key]" :label="$t('shiFouYiChang_0')" size="default" />
		</template>
		<template #materialComing_QU="scope">
			<el-checkbox v-model="scope.data.formData[scope.data.item.key]" :label="$t('shiFouYiChang_0')" size="default" />
		</template>
		<template #quality_QU="scope">
			<el-checkbox v-model="scope.data.formData[scope.data.item.key]" :label="$t('shiFouYiChang_0')" size="default" />
		</template>
		<template #progressStatus_QU="scope">
			<el-checkbox v-model="scope.data.formData[scope.data.item.key]" :label="$t('shiFouYiChang_0')" size="default" />
		</template>
		<template #security_QU="scope">
			<el-checkbox v-model="scope.data.formData[scope.data.item.key]" :label="$t('shiFouYiChang_0')" size="default" />
		</template>
		<template #customerComplaints_QU="scope">
			<el-checkbox v-model="scope.data.formData[scope.data.item.key]" :label="$t('shiFouYiChang_0')" size="default" />
		</template>
	</static-forms>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { writeDailyFormConfig, StaticForms, changeDailyFormConfig } from '../config/form/index';
import staffAction from './staffAction.vue';
import { currentDay } from '/@/utils/hook/index';
import { ElMessage } from 'element-plus';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;

const progressValue = ref(0); //当前选中进度值
const oldProgressValue = ref(0); //项目进度值
let isNeedWatch = true; //是否需要监听project

//监听project数据发生变化
const watchCallBack = async (valueList: any[], formData: any, formList: any[], obj: any) => {
	if (isNeedWatch && obj.projectNo.newVal && obj.projectNo.isChanged) {
		try {
			progressValue.value = Number(formData.proProcess || 0);
			oldProgressValue.value = Number(formData.proProcess || 0);
		} catch (error) {
			
		}
	}
};

const changeAction = () => {
	if (progressValue.value < oldProgressValue.value) {
		progressValue.value = oldProgressValue.value;
		ElMessage.warning($t('xiangMuJinDuBuKeHouTui'));
	}
};
const formRef = ref();
const addNew = (data: any) => {
	progressValue.value = 0;
	oldProgressValue.value = 0;
	isNeedWatch = true;
	//获取当前日期
	data.date = currentDay;
	let list: any = writeDailyFormConfig(data);
	formRef.value.openDialog(list, $t('xinZengRiBao'));
};
const changeFormAction = (data: any) => {
	isNeedWatch = false;
	progressValue.value = Number(data.progressPercentage || 0);
	oldProgressValue.value = Number(data.progressPercentage || 0);
	let list: any = changeDailyFormConfig(data);
	formRef.value.openDialog(list, $t('xiuGaiRiBao'));
};

//提交表单验证
const beforeHandler = async () => {
	if (formRef.value.formData.proProcess == '') {
		formRef.value.formData.proProcess = 0;
	}
	const showTint = (tint: String) => {
		ElMessage({
			type: 'error',
			message: tint + '',
		});
	};
	let resultStatus = true; //检测结果
	formRef.value.formData.workHours.forEach((element: any) => {
		if (element.staffID == '') {
			showTint($t('gongHaoBuNengWeiKong'));
			return (resultStatus = false);
		} else if (element.dutyHours != '0' && !element.dutyHours) {
			showTint($t('zhengChangGongShiBuNengWeiKong'));
			return (resultStatus = false);
		} else if (element.dutyHours > 8) {
			showTint($t('zhengChangGongShiBuNengDaYu_8XiaoShi'));
			return (resultStatus = false);
		} else if (element.extraHours != '0' && !element.extraHours) {
			showTint($t('jiaBanGongShiBuNengWeiKong'));
			return (resultStatus = false);
		} else if (element.extraHours > 16) {
			showTint($t('jiaBanGongShiBuNengDaYu_16XiaoShi'));
			return (resultStatus = false);
		}
	});

	return Promise.resolve(resultStatus);
};

defineExpose({
	formRef,
	addNew,
	changeFormAction,
	progressValue,
});
</script>
<scope lang="scss">
//el-ui内部class使用:deep 修改属性样式
// :deep(.el-input.is-disabled .el-input__inner) {
// 		-webkit-text-fill-color: #030303;
// 	}
//如果是外层的class,直接使用.xx修改!!
.el-checkbox {
	font-size: 12px;
	font-weight: normal;
}
</scope>
